<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>promise</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.js"></script>
    <script src="../lib/angularjs/angular-resource.js"></script>
</head>
<body ng-app="app01">
<div class="panel panel-primary"  ng-controller="ctrl01">
    <div class="panel-heading"><b>promise</b></div>
    <div class="panel-body">
        <label for="flag">成功
            <input id="flag" type="checkbox" ng-model="flag" /><br/>
        </label>
        <hr/>
        <button ng-click="handle()">点击我</button>
    </div>
</div>
<div class="panel panel-primary"  ng-controller="ctrl02">
    <div class="panel-heading"><b>通过使用then进行链式请求</b></div>
    <div class="panel-body">
        <label for="flag2">成功
            <input id="flag2" type="checkbox" ng-model="flag" /><br/>
        </label>
        <div ng-cloak>
            {{status}}
        </div>
        <hr/>
        <button ng-click="handle()">点击我</button>
    </div>
</div>
</body>
<script>
    var app=angular.module('app01',[]);
</script>
<script>
    app.controller('ctrl01',['$scope', "$q", function ($scope, $q) {
        $scope.flag = true;
        $scope.handle = function () {
            var deferred = $q.defer();
            var promise = deferred.promise;

            promise.then(function (result) {
                alert("Success: " + result);
            }, function (error) {
                alert("Fail: " + error);
            });

            if ($scope.flag) {
                deferred.resolve("you are lucky!");/** 设置可以访问 **/
            } else {
                deferred.reject("sorry, it lost!");/**  设置访问拒绝 **/
            }
        }
    }]);
</script>
<script>
    app.controller("ctrl02", ["$scope", "$q", function ($scope, $q) {
        $scope.flag = true;
        $scope.handle = function () {
            var deferred = $q.defer();
            var promise = deferred.promise;

            promise.then(function (result) {
                result = result + "you have passed the first then()";
                $scope.status = result;
                return result;
            }, function (error) {
                error = error + "failed but you have passed the first then()";
                $scope.status = error;
                return error;
            }).then(function (result) {
                alert("Success: " + result);
            }, function (error) {
                alert("Fail: " + error);
            })

            if ($scope.flag) {
                deferred.resolve("you are lucky!");
            } else {
                deferred.reject("sorry, it lost!");
            }
        }
    }]);

</script>
</html>